<template>
  <div class="box">
    <!-- 环形进度条 -->
    <van-circle
      v-model:current-rate="count"
      :rate="count"
      :speed="100"
      :text="`拼团进度：${count}%`"
      :color="gradientColor"
      size="200"
    >
    </van-circle>

    <!-- 倒计时 -->
     <van-count-down :time="time" />
  </div>
  

  <!-- 拼团商品 -->
  <van-card
    :thumb="team.product.thumbs_text"
    @click-thumb="toProductInfo(team.proid)"
  >
    <template #title>
      <div class="title">{{team.product.name}}</div>
    </template>

    <template #desc>
      <van-highlight :keywords="`${team.total}`" :source-string="`人数：${team.total} 人`" highlight-class="people" />
      拼团时间：{{team.createtime_text}}(开始) ~ {{team.endtime_text}}(结束)<br />
      拼团价格：￥{{team.product.team}}<br />
    </template>
    
  </van-card>

  <!-- 拼团列表 -->
  <van-list class="team">
    <div class="item" v-for="(item, key) in list" :key="key">
      <van-image
        width="60"
        height="60"
        round
        :src="item.businfo.avatar_text"
        fit="cover"
      />
      <div class="info">
        <div class="nickname" v-if="key == 0">{{item.businfo.nickname}}(发起人)</div>
        <div class="nickname" v-else>{{item.businfo.nickname}}</div>
        <div class="time">拼单时间：{{item.createtime_text}}</div>
      </div>
    </div>
  </van-list>

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="danger" size="large" >参与拼团</van-button>
    <van-button square hairline type="warning" size="large" >发起拼团</van-button>
  </div>

</template>

<script setup>
  const {proxy} = getCurrentInstance();

  let teamid = proxy.$route.query.teamid ? proxy.$route.query.teamid : 0
  let team = ref({
    product: {},
    business: {}
  })
  let list = ref([])
  let count = ref(50)
  let time = ref(30 * 60 * 60 * 1000);
  const gradientColor = {
      '0%': '#3fecff',
      '100%': '#6149f6',
  };

  onBeforeMount(() => {
    TeamInfo()
  })

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})
  
  const TeamInfo = async () => 
  {
    var result = await proxy.$POST({
      url: '/teamwork/info',
      params: {teamid: teamid}
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    team.value = result.data.team

    list.value = result.data.list
    console.log(list.value)

    //拼团进度
    var num = parseFloat(list.value.length / team.value.total).toFixed(2)
    count.value = num*100

    //倒计时
    time.value = parseInt(team.value.endtime - team.value.createtime)*1000
  }

</script>


<style>
    .van-circle__text{
      font-size:20px;
    }

    .van-count-down{
      font-size:20px;
    }

    .box{
      width:100%;
      text-align: center;
      padding-top:20px;
    }

    .item{
      width:100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      align-content:center;
      padding-left:10px;
      margin-bottom:10px;
    }

    .item .info{
      margin-left:10px;
    }

    .item .info .nickname,.item .info .time{
      font-size:16px;
      font-weight: bold;
    }

    .actions{
      position: fixed;
      width:100%;
      left:0;
      bottom:0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      align-content: center;
    }

</style>


<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }

  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }
</style>
  